<!DOCTYPE html>

<html>

	<head>

		<meta charset='utf-8'/>

		<title>Colorbox Examples</title>

		<style>

			body{font:12px/1.2 Verdana, sans-serif; padding:0 10px;}

			a:link, a:visited{text-decoration:none; color:#416CE5; border-bottom:1px solid #416CE5;}

			h2{font-size:13px; margin:15px 0 0 0;}

		</style>

		<link rel="stylesheet" href="colorbox.css" />

		<script src="../jquery-1.9.1.min.js"></script>

		<script src="../jquery.colorbox.js"></script>

		<script>
			$(function() {
					$(".inline").colorbox({inline:true, width:"50%"});

			})


		</script>

	</head>

	<body>


		<p><a class='inline' href="#inline_content">Inline HTML</a></p>

		




		<!-- This contains the hidden content for inline calls -->

		<div style='display:none'>

			<div id='inline_content' style='padding:10px; background:#fff;'>

			<p><strong>This content comes from a hidden element on this page.</strong></p>

			<p>The inline option preserves bound JavaScript events and changes, and it puts the content back where it came from when it is closed.</p>

			<p><a id="click" href="#" style='padding:5px; background:#ccc;'>Click me, it will be preserved!</a></p>

			

			<p><strong>If you try to open a new Colorbox while it is already open, it will update itself with the new content.</strong></p>

			<p>Updating Content Example:<br />

			<a class="ajax" href="../content/ajax.html">Click here to load new content</a></p>

			</div>

		</div>

	<script src="http://www.jq22.com/js/jq.js"></script>

</body>

</html>